<template>
	<div class="page-my-info">
		<div class="title">基本信息</div>

		<el-form
			size="small"
			:rules="rules"
			ref="ruleForm"
			label-width="100px"
			:model="form"
			:disabled="saving"
		>
			<el-form-item label="头像" v-if="!isChannel">
				<cl-upload v-model="form.headImg"></cl-upload>
			</el-form-item>

			<el-form-item label="昵称" v-if="!isChannel">
				<el-input v-model="form.nickName"></el-input>
			</el-form-item>

			<el-form-item label="旧密码" v-if="isChannel" prop="oldPassword">
				<el-input type="password" v-model="form.oldPassword"></el-input>
			</el-form-item>

			<el-form-item label="新密码" v-if="isChannel" prop="password">
				<el-input type="password" v-model="form.password"></el-input>
			</el-form-item>

			<el-form-item label="新密码" v-else>
				<el-input type="password" v-model="form.password"></el-input>
			</el-form-item>

			<el-form-item label>
				<el-button type="primary" @click="save" :disabled="saving">保存修改</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			form: {},
			saving: false,
			rules: {
				oldPassword: [
					{
						required: true,
						message: '请输入旧密码',
						trigger: 'blur'
					}
				],
				password: [
					{
						required: true,
						message: '请输入新密码',
						trigger: 'blur'
					}
				]
			}
		};
	},

	computed: {
		...mapGetters(['userInfo']),
		isChannel() {
			return this.userInfo.roleIdList[0] == 60;
		}
	},

	mounted() {
		this.form = this.userInfo;
	},

	methods: {
		save() {
			this.$refs['ruleForm'].validate(valid => {
				if (valid) {
					this.saving = true;
					const { headImg, nickName, password, oldPassword } = this.form;

					this.$service.common
						.userUpdate({
							headImg,
							nickName,
							password,
							oldPassword
						})
						.then(() => {
							this.form.password = '';
							this.form.oldPassword = '';
							this.$message.success('修改成功');
							this.$store.dispatch('userInfo');
						})
						.catch(err => {
							this.$message.error(err);
						})
						.done(() => {
							this.saving = false;
						});
				} else {
					return false;
				}
			});
		}
	}
};
</script>

<style lang="stylus">
.page-my-info {
	background-color: #fff;
	height: 100%;
	padding: 20px;
	box-sizing: border-box;

	.el-form {
		width: 400px;
	}

	.title {
		color: #000;
		margin-bottom: 30px;
		font-size: 15px;
	}
}
</style>
